<template>

  <div style="padding: 10px;">
    <el-row >
      <el-col>
        <div style="display: flex;">
          <div>
            <el-form :model="list_params" ref="searchForm"  size="small" :inline="true">
              <el-form-item label="" label-width="80px" prop="contractNumber">
                <el-input v-model="list_params.contractNumber" placeholder="合同号/货柜号搜索" ></el-input>
              </el-form-item>
              <el-form-item label="" prop="settlementStatus">
                <el-select filterable  v-model="list_params.settlementStatus" placeholder="请选择结算状态" clearable filterable :style="{width: '100%'}">
                  <el-option v-for="item in dict.type.order_settlement_status" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary"  size="mini" @click="handleQuery">搜索</el-button>
                <el-button  size="mini" type="reset" @click="resetQuery">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="flex: 1;"></div>
<!--          <div>-->
<!--            <el-button>删除</el-button>-->
<!--            <el-button @click="handleEnable(0)" >禁用</el-button>-->
<!--            <el-button @click="handleEnable(1)" >启用</el-button>-->
<!--            <el-button @click="handleExport">导出</el-button>-->
<!--            <el-button>导入</el-button>-->
<!--            <el-button type="primary" @click="addInfo" >新增</el-button>-->
<!--          </div>-->
        </div>
      </el-col>
      <el-col>
        <div style="margin-top: 10px;">
          <el-table :data="list_data" @selection-change="handleSelectionChange"  :height="table_height" style="width: 100%;" >
            <el-table-column type="selection" width="50" align="center"  />
            <el-table-column label="货主" prop="cargoOwnerName"></el-table-column>
            <el-table-column label="合同号" prop="contractNumber"></el-table-column>
            <el-table-column label="货柜号" prop="containerNumber"></el-table-column>
            <el-table-column label="供货商品" prop="productNames"></el-table-column>
            <el-table-column label="到货数量" prop="totalQty"></el-table-column>
            <el-table-column label="到货日期" prop="surplusQty"></el-table-column>
            <el-table-column label="车牌号" prop="licensePlateNumber"></el-table-column>
            <el-table-column label="状态" >
              <template slot-scope="scope" >
                <div><dict-tag :options="dict.type.supply_list_status" :value="scope.row.agencySellingStatus"/></div>
              </template>
            </el-table-column>
            <el-table-column label="发车时间" prop="departTime"></el-table-column>
            <el-table-column label="结算时间" prop=""></el-table-column>
            <el-table-column label="结算状态" prop="settlementStatus">
              <template slot-scope="scope" >
                <div><dict-tag :options="dict.type.order_settlement_status" :value="scope.row.settlementStatus"/></div>
              </template>
            </el-table-column>
            <el-table-column label="付款状态" prop=""></el-table-column>
            <el-table-column label="操作" prop="op" fixed="right">
              <template slot-scope="scope" >
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                >查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="list_total>0"
            :total="list_total"
            :page.sync="list_params.pageNum"
            :limit.sync="list_params.pageSize"
            @pagination="getList"
          />
        </div>
      </el-col>
    </el-row>
    <el-drawer
      title="代卖到货详情"
      size="80%"
      :visible.sync="edit_dialog_show">
      <div>
        <div class="section">
          <el-row>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">合同号</div>
              <div>{{info.contractNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">状态</div>
              <div><dict-tag :options="dict.type.supply_list_status" :value="info.agencySellingStatus"/> </div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">供货单</div>
              <div>{{info.containerNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">货柜号</div>
              <div>{{info.containerNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">货主</div>
              <div>{{info.cargoOwnerName}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">供货产品</div>
              <div>{{info.productNames}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">到货数量</div>
              <div>{{ info.totalQty }}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">车牌号</div>
              <div>{{info.licensePlateNumber}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">发车时间</div>
              <div>{{info.departTime}}</div>
            </el-col>
            <el-col :span="4" class="section-item">
              <div class="section-item-title">到货日期</div>
              <div>{{info.arrivalDate}}</div>
            </el-col>
          </el-row>
        </div>
        <div class="section">
          <div style="padding-bottom: 12px;">产品明细</div>
          <div>
            <el-table :data="product_list" show-summary>
              <el-table-column label="序号">
                <template slot-scope="scope" >
                {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column label="产品" prop="productName">
              </el-table-column>
              <el-table-column label="规格" prop="specificationName"></el-table-column>
              <el-table-column label="到货数量" prop="cnt"></el-table-column>
              <el-table-column label="箱规(KG/件)" prop="boxSpecificationWeight"></el-table-column>
              <el-table-column label="重量(KG)" prop="weight"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="section">
          <el-row>
            <el-col :span="12">
              <div>图片附件</div>
            </el-col>
            <el-col :span="12">
              <div>文件附件</div>
            </el-col>
          </el-row>
        </div>
        <div class="section" style="display: flex;justify-content: flex-end;position: sticky;width: 100%;bottom: 0px;margin: 0px;">
          <el-button type="primary" v-if="info.agencySellingStatus == 9" @click="confirmReceiptOrder">确认收货</el-button>
          <el-button type="danger" v-if="info.agencySellingStatus == 11" @click="confirmSettle">发起结算</el-button>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      title="代卖到货详情"
      size="80%"
      :visible.sync="dialog_show">

    </el-drawer>
    <el-dialog title="确认收货" :visible.sync="confirmReceiptDialogVisible" center top="400px" width="400px" >
      <el-row>
        <el-col>
          <div style="text-align: center;font-size: 18px;">
            签署收货确认短信已下发至{{ receipt_info.agentName }},号码({{receipt_info.agentPhone}}),请前往短信链接地址进行收货确认
          </div>
        </el-col>
      </el-row>
      <div slot="footer"  >
        <el-button type="primary"  @click="receiptConfirm">好的</el-button>
      </div>
    </el-dialog>
    <el-dialog title="代卖结算" :visible.sync="confirmSettleDialogVisible" center top="400px" width="300px" style="border-radius: 10px;" @close="close" >
<!--      <el-form :model="settle_form" >-->
<!--        <el-row>-->
<!--          <el-col :span="8">-->
<!--            <div style="padding: 10px;">-->
<!--              <div>商品结算金额：</div>-->
<!--              <div style="margin-top: 10px;font-size: 18px;">{{ settle_form.goodsSettlementAmt }}</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="8">-->
<!--            <div style="padding: 10px;">-->
<!--              <div>金额调整：</div>-->
<!--              <el-form-item style="margin-top: 10px;">-->
<!--                <el-input v-model="settle_form.adjustmentAmt"></el-input>-->
<!--              </el-form-item>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="7">-->
<!--            <div style="padding: 10px;">-->
<!--              <div>垫付费用：</div>-->
<!--              <div style="margin-top: 10px;font-size: 18px;">{{settle_form.prepaymentFee}}</div>-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="1">-->
<!--            <div style="padding: 10px;">=</div>-->
<!--          </el-col>-->
<!--          <el-col>-->
<!--            <el-form-item label="结算金额">-->
<!--              <div>{{ settle_form.settlementAmt }}</div>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col>-->
<!--            <el-form-item label="是否结清" prop="settleUp">-->
<!--              <el-radio-group v-model="settle_form.settleUp">-->
<!--                <el-radio label="未结清" value="0"></el-radio>-->
<!--                <el-radio label="已结清" value="1"></el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col>-->
<!--            <el-form-item label="结算日期" prop="settlementDate">-->
<!--              <el-date-picker type="date" placeholder="选择日期" v-model="settle_form.settlementDate"></el-date-picker>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col>-->
<!--            <el-form-item prop="remark" label="备注">-->
<!--              <el-input v-model="settle_form.remark"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </el-form>-->
      <div>
        确认发起结算申请？
      </div>
      <div slot="footer"  >
        <el-button @click="close"  >取消</el-button>
        <el-button type="primary"  @click="settleConfirm">确定发起</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {list as subjectList} from '@/api/base/subject'
import {list,getProductList,detail,initiateSettlement,confirmReceipt } from '@/api/agency/selling'
export default {
  name: 'sea_transportation',
  dicts:['supply_list_status','currency','material_flow_type','order_settlement_status'],
  data() {
    return {
      table_height:window.innerHeight - 300,
      settle_form:{
        goodsSettlementAmt:0,
        adjustmentAmt:0,
        prepaymentFee:0,
        settlementAmt:0,
        settleUp:'0',
        settlementDate:'',
        remark:'',
      },
      receipt_info:{},
      confirmReceiptDialogVisible:false,
      confirmSettleDialogVisible:false,
      dialog_show : false,
      edit_dialog_show : false,
      fees:[{ sub_id:'' }],
      list_params: {
        pageNum: 1,
        pageSize: 10,
        name: ''
      },
      list_data:[],
      list_total:0,
      info:{},
      product_list:[],
    }
  },
  created() {
    this.getSubjectList()
    this.getList()
  },
  methods: {
    getList(){
      list(this.list_params).then(res => {
        console.log(res)
        this.list_data = res.rows;
        this.list_total = res.total
      })
    },
    getSubjectList(){
      subjectList({is_page:0}).then(res => {
        console.log(res)
        this.fees =  res.rows;
      })
    },
    handleQuery() {
      console.log('查询')
      this.getList()
    },
    showInfo(e){
      detail(e.id).then((res) => {
        console.log(res)
        this.info = res.data
        getProductList(res.data.id).then(res1 => {
          console.log(res1)
          this.product_list = res1.rows
        })
      })
      this.edit_dialog_show = true
    },
    addInfo(){
      this.dialog_show = true
    },
    confirmReceiptOrder(){
      // this.show
        confirmReceipt({id:this.info.id}).then(res => {
          console.log(res)
          this.receipt_info = res.data
          this.confirmReceiptDialogVisible = true
          this.getList()
        })
    },
    receiptConfirm(){
      this.edit_dialog_show = false;
      this.confirmReceiptDialogVisible = false
    },
    confirmSettle(){
      this.confirmSettleDialogVisible = true

    },
    close() {
      this.confirmSettleDialogVisible = false
    },
    settleConfirm() {
      initiateSettlement({id:this.info.id,settlementDate:this.formatDate(new Date())}).then(res => {
        console.log(res)
        this.$message({
          message: '发起成功',
          type: 'success'
        });
        this.close()
        this.getList()
      })
    },
    formatDate(date) {
      const year = String(date.getFullYear());
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return year + '-' + month + '-' + day;
    },
    resetQuery(){

      this.list_params = {
        pageNum: 1,
        pageSize: 10,
        name: ''
      }
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>

<style scoped>
.section{
  background: #fff;
  padding: 24px;
//padding-bottom: 6px;
  margin: 20px;
  border-radius: 8px;
}
.section-item{
  margin: 10px 0px;
  height: 52px;
}
.section-item-title{
  padding-bottom: 10px;
  font-size: 14px;
}
</style>

<style>

.el-drawer__body{
  background: #F3F4F6;
}
.select-custom-icon .el-input__suffix {
  display: none; /* 隐藏默认的下拉箭头 */
}
.select-custom-icon .el-input__suffix::after {
  content: url('../../../assets/icons/more.png'); /* 替换为您的自定义图标路径 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.popper-class{
  display: none;
}

</style>
